<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="22.857421875"
    height="19.5"
    viewBox="0 0 22.857421875 19.5"
    fill="none"
  >
    <path
      d="M2.05341 16.75C2.05341 17.85 2.95341 18.75 4.05341 18.75C5.15341 18.75 6.05341 17.85 6.05341 16.75C6.05341 15.65 5.15341 14.75 4.05341 14.75C2.95341 14.75 2.05341 15.65 2.05341 16.75Z"
      :stroke="active ? activeColor : inactiveColor"
      stroke-width="1.5"
      stroke-linejoin="round"
      :style="style"
    ></path>
    <path
      d="M13.0534 16.75C13.0534 17.85 13.9534 18.75 15.0534 18.75C16.1534 18.75 17.0534 17.85 17.0534 16.75C17.0534 15.65 16.1534 14.75 15.0534 14.75C13.9534 14.75 13.0534 15.65 13.0534 16.75Z"
      :stroke="active ? activeColor : inactiveColor"
      stroke-width="1.5"
      stroke-linejoin="round"
      :style="style"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      d="M15.0534 14.75L4.05346 14.75L4.05346 0.75L2.05341 0.75"
    ></path>
    <g filter="url(#filter_3)">
      <path
        :stroke="active ? activeColor : inactiveColor"
        :style="style"
        stroke-width="1.5"
        stroke-linejoin="round"
        d="M4.05341 2.75L18.0534 3.75L17.0534 10.75L4.05341 10.75"
      ></path>
    </g>
    <defs>
      <filter
        id="filter_3"
        x="0"
        y="0.00189208984375"
        width="22.857421875"
        height="17.49810791015625"
        filterUnits="userSpaceOnUse"
        color-interpolation-filters="sRGB"
      >
        <feFlood flood-opacity="0" result="feFloodId_3" />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha_3"
        />
        <feOffset dx="0" dy="2" />
        <feGaussianBlur stdDeviation="2" />
        <feComposite in2="hardAlpha_3" operator="out" />
        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
        <feBlend mode="normal" in2="feFloodId_3" result="dropShadow_1_3" />
        <feBlend mode="normal" in="SourceGraphic" in2="dropShadow_1_3" result="shape_3" />
      </filter>
    </defs>
  </svg>
</template>

<script>
  import config from './config' // 导入配置文件
  const { transionDuration, activeColor, inactiveColor } = config

  export default {
    name: 'orders-svg',
    props: {
      active: { default: false },
      transiton: {
        type: Number,
        default: transionDuration,
      },

      activeColor: {
        type: String,
        default: activeColor,
      },
      inactiveColor: {
        type: String,
        default: inactiveColor,
      },
    },
    computed: {
      style() {
        return { transition: `stroke ${this.transiton}s ease` }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
